<template>
	<view @click="openPopup">
		<view v-if="help.type==1" class="assistance" :style="'background-image: url(' + assistance_bg+ ')'">
			<button>关注公众号</button>
		</view>
		<view v-if="help.type==2" class="assistance" :style="'background-image: url(' + assistance_bg+ ')'">
			<button>加好友</button>
		</view>
		<view v-if="help.type==3" class="assistance" :style="'background-image: url(' + assistance_bg+ ')'">
			<button>观看视频</button>
		</view>
		<view v-if="help.type==4" class="assistance" :style="'background-image: url(' + assistance_bg+ ')'">
			<button>邀请好友</button>
		</view>
		<uni-popup class="help_popup" ref="popup" type="bottom" background-color="#fff">
			<popup :help="help" />
		</uni-popup>

	</view>
</template>
<script>
	import popup from "./popup.vue"
	export default {
		components: {
			popup
		},
		data() {
			return {
				domain: uni.$http.baseUrl + "/",
				assistance_bg: `${uni.imgPath}/upload/h5/lucky/2.png`
			}
		},
		props: {
			help: {
				type: Object,
				default: () => ({})
			}
		},
		methods: {
			close() {
				this.$refs.popup.close()
			},
			openPopup() {
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.assistance {
		position: relative;
		margin: 30rpx;
		background-size: 100% 100%;
		height: 700rpx;

		button {
			background: linear-gradient(180deg, #FD8A6D 0%, #EF5122 100%);
			box-shadow: 3px 3px 0px 1px #D50000;
			border-radius: 12px 12px 12px 12px;
			color: #fff;
			width: 300rpx;
			padding: 10rpx 20rpx;
			margin: 0;
			line-height: 45rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%);
		}

		.popup_box {
			background: #fff;
			border-radius: 32rpx 32rpx 0px 0px;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.title {
			width: 750rpx;
			height: 91rpx;
			background: linear-gradient(316deg, #356AFA 0%, #34B8FD 100%);
			border-radius: 32rpx 32rpx 0px 0px;
			color: #fff;
			font-size: 34rpx;
			text-align: center;
			line-height: 91rpx;
		}
	}
</style>